import React, { Component } from 'react'
import 'vtk.js/Sources/favicon';

import vtkActor from 'vtk.js/Sources/Rendering/Core/Actor';
import vtkFullScreenRenderWindow from 'vtk.js/Sources/Rendering/Misc/FullScreenRenderWindow';
import vtkMapper from 'vtk.js/Sources/Rendering/Core/Mapper';
import vtkPolyDataReader from 'vtk.js/Sources/IO/Legacy/PolyDataReader';

const fileName = 'sphere.vtk'; // 'uh60.vtk'; // 'luggaBody.vtk';
const __BASE_PATH__ = '/static'


class DOM extends Component{

    componentDidMount(){

        const fullScreenRenderer = vtkFullScreenRenderWindow.newInstance();
        const renderer = fullScreenRenderer.getRenderer();
        const renderWindow = fullScreenRenderer.getRenderWindow();
        
        const resetCamera = renderer.resetCamera;
        const render = renderWindow.render;
        
        // ----------------------------------------------------------------------------
        // Example code
        // ----------------------------------------------------------------------------
        
        const reader = vtkPolyDataReader.newInstance();
        reader.setUrl(`${__BASE_PATH__}/${fileName}`).then(() => {
          const polydata = reader.getOutputData(0);
          const mapper = vtkMapper.newInstance();
          const actor = vtkActor.newInstance();
        
          actor.setMapper(mapper);
          mapper.setInputData(polydata);
        
          renderer.addActor(actor);
        
          resetCamera();
          render();
        });
        
        // -----------------------------------------------------------
        // Make some variables global so that you can inspect and
        // modify objects in your browser's developer console:
        // -----------------------------------------------------------
        
        global.reader = reader;
        global.fullScreenRenderer = fullScreenRenderer;
    }

    render(){
        return null
    }
}

export default DOM